<template>
  <div v-clickoutside="closeHandle" class="cascader">
    <div class="selectBox" :style="setStyle" @click="selectHandle">
      <span v-if="checkList.length<=0" class="placeholder">请选择</span>
      <template v-if="checkList.length">
        <span v-for="(it, index) in checkList" :key="index" class="showItem">
          {{ it.name }}
          <i v-if="it.type == 1" class="all">(全部)</i>
          <i class="del icon" @click.stop="delCheck(it)">&#xe632;</i>
        </span>
      </template>
      <span class="lab icon">&#xe61e;</span>
    </div>
    <div v-if="selectOpen" class="selectItemsBox" :style="selStyle">
      <el-checkbox-group v-model="checkList">
        <div class="selectItems">
          <div class="itemsBox">
            <div v-for="(item, ind) in orgList" :key="ind" class="items">
              <el-checkbox :label="item" @change="checkListHander(item.id, 'A')"><i /></el-checkbox>
              <span :class="{act: item.id == actId[0]}" @click="getItemDate(item.id, 'A')">{{ item.name }}</span>
            </div>
          </div>
          <div v-if="selectBDataes && selectBDataes.length > 0" class="itemsBox">
            <div v-for="item in selectBDataes" :key="item.id" class="items"><el-checkbox :label="item" @change="checkListHander(item.id, 'B')"><i /></el-checkbox> <span :class="{act: item.id == actId[1]}" @click="getItemDate(item.id, 'B')">{{ item.name }}</span></div>
          </div>
          <div v-if="selectCDataes && selectCDataes.length > 0" class="itemsBox">
            <div v-for="item in selectCDataes" :key="item.id" class="items"><el-checkbox :label="item" @change="checkListHander(item.id)"><i /></el-checkbox> <span @click="getItemDate(item.id, 'C')">{{ item.name }}</span></div>
          </div>
          <div v-if="selectDDataes && selectDDataes.length > 0" class="itemsBox">
            <div v-for="item in selectDDataes" :key="item.id" class="items"><el-checkbox :label="item" @change="checkListHander(item.id)"><i /></el-checkbox> <span @click="getItemDate(item.id, 'D')">{{ item.name }}</span></div>
          </div>
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
export default {
  name: 'Dashboard',
  directives: { clickoutside },
  props: {
    closeSelectOpen: Boolean,
    checkListDataes: {
      type: Array,
      default: function() {
        return []
      }
    },
    dialogVisible: Boolean,
    'setStyle': String,
    'selStyle': String,
    'includeMember': {
      type: Number || String,
      default: 0
    }},
  data() {
    return {
      orgList: [],
      openitems: 2,
      memberlist: [],
      actId: [],
      selectBDataes: [],
      selectCDataes: [],
      selectDDataes: [],
      checked: '',
      selectOpen: false,
      checkList: [],
      checkIdList: [],
      show: true
    }
  },
  watch: {
    // checkListDataes(val){
    // this.initCheckList()
    // }
  },
  created() {
    this.getAdminList()
    this.initCheckList()
  },
  mounted() {

  },
  methods: {
    // 获取部门列表
    getAdminList() {
      this.$store.dispatch('organization/getSimOrgAct', { page: 1, pageSize: 1000, id: 0, includeMember: this.includeMember || 0 }).then((res) => {
        this.orgList = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    async getItemDate(id, lab) {
      let st = false
      this.checkList.map(n => {
        if (id === n.id) {
          st = true
        }
      })
      if (!st) {
        this.$store.dispatch('organization/getSimOrgAct', { page: 1, pageSize: 1000, id: id, includeMember: this.includeMember || 0 }).then(async(res) => {
          if (lab === 'A') {
            this.actId[0] = id
            this.selectBDataes = res
            this.selectCDataes = ''
            this.selectDDataes = ''
          } else if (lab === 'B') {
            this.actId[1] = id
            this.selectCDataes = res
            this.selectDDataes = ''
          } else if (lab === 'C') {
            this.actId[1] = id
            this.selectDDataes = res
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    // 关闭下拉
    closeHandle() {
      if (this.dialogVisible && this.selectOpen) {
        this.selectOpen = false
        this.$emit('getValue', this.checkList)
      }
    },
    // 下拉
    selectHandle() {
      this.initCheckList()
      if (this.selectOpen) {
        this.selectOpen = false
        this.$emit('getValue', this.checkList)
      } else {
        this.selectOpen = true
      }
    },
    delCheck(it) {
      const num = this.checkList.indexOf(it)
      num !== -1 ? this.checkList.splice(num, 1) : null
    },
    // 选中 子集关闭
    checkListHander(val, st) {
      if (val === this.actId[0] || val === this.actId[1]) {
        if (st === 'A') {
          this.checkListSet(this.selectBDataes)
          this.selectBDataes = ''
          this.selectCDataes = ''
          this.actId[0] = ''
        } else {
          this.checkListSet(this.selectCDataes)
          this.selectCDataes = ''
          this.actId[1] = ''
        }
      }
      this.$emit('getValue', this.checkList)
    },
    // 初始化数据
    initCheckList() {
      if (this.checkListDataes && this.checkListDataes.length > 0) {
        if (this.checkListDataes[0].id) {
          this.checkList = this.checkListDataes
        } else {
          this.checkList = this.checkListDataes.map(n => {
            return { id: String(n.objectId), name: n.objectName, type: n.objectType }
          })
        }
      }
    },
    // 数据赛选
    checkListSet(obj) {
      obj.forEach(n => {
        this.checkList.forEach((h, j) => {
          if (n.id === h.id) {
            this.checkList.splice(j, 1)
          }
        })
      })
    }
  }
}
</script>
<style scoped>
  .show {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<style lang="scss">
  .cascader {
    position: relative;
    .el-checkbox{
      margin-right: 0px;
      .el-checkbox__label{
        padding-left: 5px;
      }
    }
    .selectBox{
      border: solid 1px #ccc;
      position: relative;
      width: 175px;
      line-height: 12px;
      padding: 4px 10px;
      min-height: 30px;
      border-radius: 3px;
      cursor: pointer;
      .placeholder{
        font-size: 14px;
        line-height: 22px;
        color:#DCDFE6
      }
      .showItem{
        position: relative;
        display: inline-block;
        padding: 4px 10px;
        background: #DCDFE6;
        color: #666;
        margin: 4px 5px;
        border-radius: 3px;
        font-size: 12px;
        line-height: 12px;
        .all{
          font-size: 10px;
          font-style: normal;
        }
        .del{
          position: relative;
          display: none;
          right: -3px;
          font-size: 12px;
        }
        &:hover .del{
          display: inline-block;
        }
      }
      .lab{
        position: absolute;
        color:#ccc;
        top:10px;
        right:5px;
      }
    }
    .selectItemsBox{
      position: absolute;
      min-width: 100%;
      z-index: 3;
      background: #fff;
      display: inline-block;
      border:solid 1px #ccc;
      border-right: none;
      border-radius: 3px;
      margin-top: 10px;
    }
    .selectItems{
      display: flex;
      cursor: pointer;
      .itemsBox{
        flex: 1;
        top:0px;
        left: 175px;
        font-size: 14px;
        border-right: solid 1px #ccc;
        min-width: 173px;
        max-height: 200px;
        overflow: scroll;
        .items{
          padding: 0px 10px;
          overflow: hidden;
          line-height: 18px;
          height: 18px;
          margin: 5px 0;
          .act{
            color:#3345ff;
          }
        }
        .items:first-child{
          margin-top: 10px;
        }
        .items:last-child{
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
